import React, { useEffect, useState } from 'react'
import * as PIXI from 'pixi.js'
import '@pixi/graphics-extras'
import style from './Dice.css'
import { DiceGame } from './pixi/Dice'
import DiceG from './inlet-react-pixi/Dice'

function Dice() {
    const [count, setcount] = useState(0)
    const [diceGame, setDiceGame] = useState()
    
    // useEffect(() => {
    //     const diceGame = new DiceGame()
    //     setDiceGame(diceGame)
    //     diceGame.initGame(document.getElementById('canvas'))
    //     return () => {
    //         diceGame.app.destroy()
    //     }
    // }, [])

    return (
        <div id="app">
            {count}
            <DiceG />
            <div><canvas id="canvas" /></div>
            <button onClick={() => setcount(v => v+1)}>+1</button>
            {/* <button onClick={() => diceGame.app.destroy()}>distroy</button> */}
        </div>
    )
}

export default Dice
